<template>
    <div class="login">
        <!-- 顶部导航区域 -->
        <nav-comp :back="true" title="欢迎登录"></nav-comp>
        <gap-comp :height="3"></gap-comp>
        <van-form @submit="login">
            <van-field v-model="info.phone" name="phone" label="手机号" placeholder="手机号"
                :rules="[{ required: true, message: '请填写手机号' }]" />
            <van-field v-model="info.password" type="password" name="password" label="密码" placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]" />
            <div style="margin: 16px;">
                <van-button round block type="info" color="#FF6040" native-type="submit">点击登录</van-button>
            </div>
        </van-form>
        <gap-comp :height="7"></gap-comp>
        <div class="register" @click="goRegister">
            <van-button color="steelblue" size="mini" round plain>未注册?/点击注册</van-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            info: {
                phone: "",
                password: ""
            }
        };
    },
    methods: {
        goRegister() {
            this.$router.push('/register')
        },
        login(info) {
            this.$api.Retlogin(info)
                .then(res => {
                    console.log(res)
                    localStorage.setItem("memberInfo", JSON.stringify(res))
                    this.$notify({
                        type: 'success',
                        message: '登录成功！'
                    });
                    this.$router.push('/')
                })
                .catch(err => console.log(err))
        }
    },
};
</script>

<style scoped>
.login {
    font-size: .3rem;
}

.register {
    text-align: center;
}
</style>
